<template>
  <div>
    <a-form :form="form" class="form" @submit="handleSubmit">
      <a-card class="card" title="输入床位信息信息" :bordered="false">
        <a-form-item label="房间号">
          <a-input
            placeholder="请输入房间号"
            v-decorator="[
              'number',
              {rules: [{ required: true, message: '请输入房间号', whitespace: true}]}
            ]" />
        </a-form-item>
        <a-form-item label="床位数">
          <a-input
            placeholder="请输入床位数"
            v-decorator="[
              'count',
              {rules: [{ required: true, message: '请输入床位数', whitespace: true}]}
            ]" />
        </a-form-item>
        <a-form-item
          label="部门">
          <a-select placeholder="部门" @select="nurse" v-decorator="[ 'department', {rules: [{ required: true, message: '请选择部门'}]} ]">
            <a-select-option v-for="d in departmentList" :key="d.key">{{ d.text }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="护士">
          <a-select
            placeholder="护士人员"
            v-decorator="[
              'nurse',
              {rules: [{ required: true, message: '请输入...', whitespace: true}]}
            ]"
          >
            <a-select-option v-for="n in nurseList" :key="n.id.toString()">
              {{ n.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!--        <a-form-item label="医生">-->
        <!--          <a-select-->
        <!--            placeholder="医生人员"-->
        <!--            v-decorator="[-->
        <!--              'doctor',-->
        <!--              {rules: [{ required: true, message: '请输入...', whitespace: true}]}-->
        <!--            ]"-->
        <!--          >-->
        <!--            <a-select-option v-for="n in doctorList" :key="n.id.toString()">-->
        <!--              {{ n.name }}-->
        <!--            </a-select-option>-->
        <!--          </a-select>-->
        <!--        </a-form-item>-->
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary">提交</a-button>
          <a-button style="margin-left: 8px" @click="goback()">保存</a-button>
        </a-form-item>
      </a-card>
    </a-form>
  </div>
</template>

<script>
import { addWard } from '../../api/ward'
import { departmentList } from '@/dictionary'
import { getNurseByDepartment } from '../../api/nurse'
import { getDoctorByDepartment } from '../../api/doctor'
export default {
  data () {
    return {
      departmentList,
      nurseList: null,
      doctorList: null,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          const ward = this.form.getFieldsValue(['number', 'count', 'department', 'nurse', 'doctor'])
          addWard(ward).then(res => {
            this.$router.push('/ward/index')
          })
        }
      })
    },
    goback () {
      this.$router.push('/ward/index')
    },
    nurse (value, option) {
      getNurseByDepartment(value).then(res => {
        this.nurseList = res.result
      })
    },
    doctor (value, option) {
      getDoctorByDepartment(value).then(res => {
        console.log(res.result)
        this.doctorList = res.result
      })
    }
  }
}
</script>

<style scoped>

</style>
